Web Streams API: Pipeline Pemrosesan Data yang Efisien di JavaScript

Web Streams API menyediakan mekanisme yang kuat untuk menangani data streaming di JavaScript, memungkinkan aplikasi web yang efisien dan responsif. Alih-alih memuat seluruh dataset ke dalam memori sekaligus, stream memungkinkan Anda memproses data secara bertahap, mengurangi konsumsi memori dan meningkatkan kinerja. Ini sangat berguna saat berhadapan dengan file besar, permintaan jaringan, atau feed data real-time.

Apa itu Web Streams?

Pada intinya, Web Streams API menyediakan tiga jenis stream utama:

• ReadableStream: Mewakili sumber data, seperti file, koneksi jaringan, atau data yang dihasilkan.
• WritableStream: Mewakili tujuan data, seperti file, koneksi jaringan, atau database.
• TransformStream: Mewakili pipeline transformasi antara ReadableStream dan WritableStream. Ini dapat memodifikasi atau memproses data saat mengalir melalui stream.

Jenis-jenis stream ini bekerja sama untuk membuat pipeline pemrosesan data yang efisien. Data mengalir dari ReadableStream, melalui TransformStreams opsional, dan akhirnya ke WritableStream.

Konsep dan Terminologi Utama

• Chunks: Data diproses dalam unit diskrit yang disebut chunk. Sebuah chunk dapat berupa nilai JavaScript apa pun, seperti string, angka, atau objek.
• Controllers: Setiap jenis stream memiliki objek controller yang sesuai yang menyediakan metode untuk mengelola stream. Misalnya, ReadableStreamController memungkinkan Anda untuk memasukkan data ke dalam antrean stream, sedangkan WritableStreamController memungkinkan Anda untuk menangani chunk yang masuk.
• Pipes: Stream dapat dihubungkan bersama menggunakan metode pipeTo() dan pipeThrough(). pipeTo() menghubungkan ReadableStream ke WritableStream, sedangkan pipeThrough() menghubungkan ReadableStream ke TransformStream, dan kemudian ke WritableStream.
• Backpressure: Sebuah mekanisme yang memungkinkan konsumen untuk memberi sinyal kepada produsen bahwa ia belum siap menerima lebih banyak data. Ini mencegah konsumen menjadi kewalahan dan memastikan bahwa data diproses pada tingkat yang berkelanjutan.

Membuat ReadableStream

Anda dapat membuat ReadableStream menggunakan konstruktor ReadableStream(). Konstruktor ini menerima objek sebagai argumen, yang dapat mendefinisikan beberapa metode untuk mengontrol perilaku stream. Yang paling penting di antaranya adalah metode start(), yang dipanggil saat stream dibuat, dan metode pull(), yang dipanggil saat stream membutuhkan lebih banyak data.

Berikut adalah contoh pembuatan ReadableStream yang menghasilkan urutan angka:

const readableStream = new ReadableStream({
  start(controller) {
    let counter = 0;

    function push() {
      if (counter >= 10) {
        controller.close();
        return;
      }

      controller.enqueue(counter++);
      setTimeout(push, 100);
    }

    push();
  },
});

Dalam contoh ini, metode start() menginisialisasi sebuah penghitung dan mendefinisikan fungsi push() yang memasukkan angka ke dalam antrean stream dan kemudian memanggil dirinya sendiri lagi setelah jeda singkat. Metode controller.close() dipanggil ketika penghitung mencapai 10, menandakan bahwa stream telah selesai.

Mengonsumsi ReadableStream

Untuk mengonsumsi data dari ReadableStream, Anda dapat menggunakan ReadableStreamDefaultReader. Reader ini menyediakan metode untuk membaca chunk dari stream. Yang paling penting di antaranya adalah metode read(), yang mengembalikan promise yang akan resolve dengan objek yang berisi chunk data dan flag yang menunjukkan apakah stream telah selesai.

Berikut adalah contoh mengonsumsi data dari ReadableStream yang dibuat pada contoh sebelumnya:

const reader = readableStream.getReader();

async function read() {
  const { done, value } = await reader.read();

  if (done) {
    console.log('Stream complete');
    return;
  }

  console.log('Received:', value);
  read();
}

read();

Dalam contoh ini, fungsi read() membaca sebuah chunk dari stream, mencatatnya ke konsol, dan kemudian memanggil dirinya sendiri lagi sampai stream selesai.

Membuat WritableStream

Anda dapat membuat WritableStream menggunakan konstruktor WritableStream(). Konstruktor ini menerima objek sebagai argumen, yang dapat mendefinisikan beberapa metode untuk mengontrol perilaku stream. Yang paling penting di antaranya adalah metode write(), yang dipanggil ketika sebuah chunk data siap untuk ditulis, metode close(), yang dipanggil ketika stream ditutup, dan metode abort(), yang dipanggil ketika stream dibatalkan.

Berikut adalah contoh pembuatan WritableStream yang mencatat setiap chunk data ke konsol:

const writableStream = new WritableStream({
  write(chunk) {
    console.log('Writing:', chunk);
    return Promise.resolve(); // Menandakan keberhasilan
  },
  close() {
    console.log('Stream closed');
  },
  abort(err) {
    console.error('Stream aborted:', err);
  },
});

Dalam contoh ini, metode write() mencatat chunk ke konsol dan mengembalikan promise yang akan resolve ketika chunk berhasil ditulis. Metode close() dan abort() mencatat pesan ke konsol ketika stream ditutup atau dibatalkan.

Menulis ke WritableStream

Untuk menulis data ke WritableStream, Anda dapat menggunakan WritableStreamDefaultWriter. Writer ini menyediakan metode untuk menulis chunk ke stream. Yang paling penting di antaranya adalah metode write(), yang menerima sebuah chunk data sebagai argumen dan mengembalikan promise yang akan resolve ketika chunk berhasil ditulis.

Berikut adalah contoh menulis data ke WritableStream yang dibuat pada contoh sebelumnya:

const writer = writableStream.getWriter();

async function writeData() {
  await writer.write('Hello, world!');
  await writer.close();
}

writeData();

Dalam contoh ini, fungsi writeData() menulis string "Hello, world!" ke stream dan kemudian menutup stream tersebut.

Membuat TransformStream

Anda dapat membuat TransformStream menggunakan konstruktor TransformStream(). Konstruktor ini menerima objek sebagai argumen, yang dapat mendefinisikan beberapa metode untuk mengontrol perilaku stream. Yang paling penting di antaranya adalah metode transform(), yang dipanggil ketika sebuah chunk data siap untuk diubah, dan metode flush(), yang dipanggil ketika stream ditutup.

Berikut adalah contoh pembuatan TransformStream yang mengubah setiap chunk data menjadi huruf besar:

const transformStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  },
  flush(controller) {
    // Opsional: Lakukan operasi akhir apa pun saat stream ditutup
  },
});

Dalam contoh ini, metode transform() mengubah chunk menjadi huruf besar dan memasukkannya ke dalam antrean controller. Metode flush() dipanggil ketika stream ditutup dan dapat digunakan untuk melakukan operasi akhir apa pun.

Menggunakan TransformStreams dalam Pipeline

TransformStreams paling berguna ketika dirangkai bersama untuk membuat pipeline pemrosesan data. Anda dapat menggunakan metode pipeThrough() untuk menghubungkan ReadableStream ke TransformStream, dan kemudian ke WritableStream.

Berikut adalah contoh pembuatan pipeline yang membaca data dari ReadableStream, mengubahnya menjadi huruf besar menggunakan TransformStream, dan kemudian menuliskannya ke WritableStream:

const readableStream = new ReadableStream({
  start(controller) {
    controller.enqueue('hello');
    controller.enqueue('world');
    controller.close();
  },
});

const transformStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  },
});

const writableStream = new WritableStream({
  write(chunk) {
    console.log('Writing:', chunk);
    return Promise.resolve();
  },
});

readableStream.pipeThrough(transformStream).pipeTo(writableStream);

Dalam contoh ini, metode pipeThrough() menghubungkan readableStream ke transformStream, dan kemudian metode pipeTo() menghubungkan transformStream ke writableStream. Data mengalir dari ReadableStream, melalui TransformStream (di mana data diubah menjadi huruf besar), dan kemudian ke WritableStream (di mana data dicatat ke konsol).

Backpressure

Backpressure adalah mekanisme penting dalam Web Streams yang mencegah produsen yang cepat membanjiri konsumen yang lambat. Ketika konsumen tidak dapat mengimbangi laju produksi data, ia dapat memberi sinyal kepada produsen untuk melambat. Hal ini dicapai melalui controller stream dan objek reader/writer.

Ketika antrean internal ReadableStream penuh, metode pull() tidak akan dipanggil sampai antrean memiliki ruang yang tersedia. Demikian pula, metode write() dari WritableStream dapat mengembalikan promise yang akan resolve hanya ketika stream siap menerima lebih banyak data.

Dengan menangani backpressure dengan benar, Anda dapat memastikan bahwa pipeline pemrosesan data Anda kuat dan efisien, bahkan ketika berhadapan dengan laju data yang bervariasi.

Kasus Penggunaan dan Contoh

1. Memproses File Besar

Web Streams API sangat ideal untuk memproses file besar tanpa memuatnya seluruhnya ke dalam memori. Anda dapat membaca file dalam bentuk chunk, memproses setiap chunk, dan menulis hasilnya ke file atau stream lain.

async function processFile(inputFile, outputFile) {
  const readableStream = fs.createReadStream(inputFile).pipeThrough(new TextDecoderStream());
  const writableStream = fs.createWriteStream(outputFile).pipeThrough(new TextEncoderStream());

  const transformStream = new TransformStream({
    transform(chunk, controller) {
      // Contoh: Ubah setiap baris menjadi huruf besar
      const lines = chunk.split('\n');
      lines.forEach(line => controller.enqueue(line.toUpperCase() + '\n'));
    }
  });

  await readableStream.pipeThrough(transformStream).pipeTo(writableStream);
  console.log('File processing complete!');
}

// Contoh Penggunaan (memerlukan Node.js)
// const fs = require('fs');
// processFile('input.txt', 'output.txt');

2. Menangani Permintaan Jaringan

Anda dapat menggunakan Web Streams API untuk memproses data yang diterima dari permintaan jaringan, seperti respons API atau server-sent events. Ini memungkinkan Anda untuk mulai memproses data segera setelah tiba, daripada menunggu seluruh respons diunduh.

async function fetchAndProcessData(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      const text = decoder.decode(value);
      // Proses data yang diterima
      console.log('Received:', text);
    }
  } catch (error) {
    console.error('Error reading from stream:', error);
  } finally {
    reader.releaseLock();
  }
}

// Contoh Penggunaan
// fetchAndProcessData('https://example.com/api/data');

3. Feed Data Real-Time

Web Streams juga cocok untuk menangani feed data real-time, seperti harga saham atau pembacaan sensor. Anda dapat menghubungkan ReadableStream ke sumber data dan memproses data yang masuk saat tiba.

// Contoh: Mensimulasikan feed data real-time
const readableStream = new ReadableStream({
  start(controller) {
    let intervalId = setInterval(() => {
      const data = Math.random(); // Mensimulasikan pembacaan sensor
      controller.enqueue(`Data: ${data.toFixed(2)}`);
    }, 1000);

    this.cancel = () => {
      clearInterval(intervalId);
      controller.close();
    };
  },
  cancel() {
    this.cancel();
  }
});

const reader = readableStream.getReader();

async function readStream() {
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        console.log('Stream closed.');
        break;
      }
      console.log('Received:', value);
    }
  } catch (error) {
    console.error('Error reading from stream:', error);
  } finally {
    reader.releaseLock();
  }
}

readStream();

// Hentikan stream setelah 10 detik
setTimeout(() => {readableStream.cancel()}, 10000);

Manfaat Menggunakan Web Streams API

• Peningkatan Kinerja: Proses data secara bertahap, mengurangi konsumsi memori dan meningkatkan responsivitas.
• Manajemen Memori yang Ditingkatkan: Hindari memuat seluruh dataset ke dalam memori, terutama berguna untuk file besar atau stream jaringan.
• Pengalaman Pengguna yang Lebih Baik: Mulai memproses dan menampilkan data lebih cepat, memberikan pengalaman pengguna yang lebih interaktif dan responsif.
• Pemrosesan Data yang Disederhanakan: Buat pipeline pemrosesan data yang modular dan dapat digunakan kembali menggunakan TransformStreams.
• Dukungan Backpressure: Tangani laju data yang bervariasi dan cegah konsumen agar tidak kewalahan.

Pertimbangan dan Praktik Terbaik

• Penanganan Kesalahan: Terapkan penanganan kesalahan yang kuat untuk menangani kesalahan stream dengan baik dan mencegah perilaku aplikasi yang tidak terduga.
• Manajemen Sumber Daya: Lepaskan sumber daya dengan benar ketika stream tidak lagi diperlukan untuk menghindari kebocoran memori. Gunakan reader.releaseLock() dan pastikan stream ditutup atau dibatalkan jika sesuai.
• Encoding dan Decoding: Gunakan TextEncoderStream dan TextDecoderStream untuk menangani data berbasis teks untuk memastikan pengkodean karakter yang benar.
• Kompatibilitas Browser: Periksa kompatibilitas browser sebelum menggunakan Web Streams API, dan pertimbangkan untuk menggunakan polyfill untuk browser yang lebih lama.
• Pengujian: Uji pipeline pemrosesan data Anda secara menyeluruh untuk memastikan fungsinya dengan benar dalam berbagai kondisi.

Kesimpulan

Web Streams API menyediakan cara yang kuat dan efisien untuk menangani data streaming di JavaScript. Dengan memahami konsep-konsep inti dan memanfaatkan berbagai jenis stream, Anda dapat membuat aplikasi web yang kuat dan responsif yang dapat menangani file besar, permintaan jaringan, dan feed data real-time dengan mudah. Menerapkan backpressure dan mengikuti praktik terbaik untuk penanganan kesalahan dan manajemen sumber daya akan memastikan bahwa pipeline pemrosesan data Anda andal dan berkinerja tinggi. Seiring aplikasi web terus berkembang dan menangani data yang semakin kompleks, Web Streams API akan menjadi alat penting bagi para pengembang di seluruh dunia.